<template lang="pug">
    .container(id="_t")
        .row
            .col-lg-9
                //面包屑
                b-breadcrumb
                    b-breadcrumb-item
                        router-link(to="/")
                            b-icon.mr-1(icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true")
                            | {{breadcrumbItems[0].name}}
                    template(v-for="item in breadcrumbItems.slice(1, bLength-1)")
                        b-breadcrumb-item
                            router-link(:to="'/category/' + item.cid")
                                | {{item.name}}
                    b-breadcrumb-item(active)
                            | {{breadcrumbItems[bLength-1].name}}

                //标题
                h1.mt-4.mb-3 {{categoryName}}
                hr.my-0

                //教师列表
                teacher-list(v-if='hasStaffList' :staff-list='staffList')
                //teacher-list

                //新闻列表
                template(v-if='!hasStaffList' v-for="post in postList")
                    media-list-item(
                        :articleUrl="'/post/' + post.pid"
                        :imgUrl="post.imgUrl"
                        :head="post.title"
                        :intro="post.desc"
                        :date="sliceDate(post.datetime)"
                        :views="post.views"
                    )
                    hr.my-0

                //boostrap分页器
                b-pagination.pagination-blog.my-5.pt-lg-1(
                    v-if='!hasStaffList'
                    v-model="currentPage"
                    :total-rows="rows"
                    :per-page="perPage"
                    align="left"
                    pills
                )

            .col-lg-3.order-lg-first.pr-xl-5

                ul.list-group.list-group-flush.list-group-careers.pb-3.bg-light
                    li.list-group-item.pt-0
                        router-link(:to='computeParentLink').small
                            font-awesome-icon.mr-1(:icon='["fas", "arrow-left"]')
                            | 返回{{computeParentName}}
                    template(v-for="sibling in siblingCategoryList")
                        li.list-group-item
                            router-link.a-decoration-none(:to="'/category/' + sibling.cid")
                                |{{sibling.name}}
                            font-awesome-icon.fa-fw.text-gray-400(:icon='["fas", "globe"]')

                .card.my-5
                    .card-header.d-flex.justify-content-between
                        router-link.mr-2.text-dark.text-decoration-none(to="/latest?page=1")
                            | 最新消息
                        span.badge.badge-warning-soft.text-warning.font-weight-normal
                            | {{computeMsgNum}}
                    .list-group.list-group-flush.small
                        template(v-for="msg in currentMsg")
                            router-link.list-group-item.list-group-item-action(:to="'/post/' + msg.pid")
                                .text-xs.text-muted {{sliceMsgDate(msg.datetime)}}
                                div {{trimMsgHead(msg.title)}}

</template>

<script>
import MediaListItem from '../../media_layout/media-list-item';
import { getLatestPosts, getPostListByCid } from '../../../api/category';
import TeacherList from './teacher-list';
import { activatedFlag } from '../../../utils/mixin';
export default {
    name: 'article-list',
    mixins: [activatedFlag],
    components: { TeacherList, MediaListItem },
    methods: {
        sliceDate(datetime) {
            if (datetime) {
                return datetime.split(' ')[0];
            }
            return '';
        },
        sliceMsgDate(datetime) {
            if (datetime) {
                const arr = datetime.split(' ')[0].split('-');
                return arr[1] + '-' + arr[2];
            }
            return '';
        },
        trimMsgHead(head) {
            let _head = head;
            if (_head && _head.length > 20) {
                _head = _head.substring(0, 20);
                _head += '...';
            }
            return _head;
        },
        changeCurrentPage() {
            getPostListByCid(this.cid, this.perPage, this.currentPage).then(
                ({ postList, pageInfo, staffList }) => {
                    if (staffList) {
                        this.staffList = staffList;
                    } else {
                        this.postList = postList;
                        this.rows = pageInfo.rows;
                        window.scrollTo(0, 0);
                    }
                }
            );
        },
        //跳转路由 至指定页数,
        routeSetPage(page) {
            this.$router
                .push({
                    name: 'Category',
                    query: { page: page },
                })
                .catch(err => err);
        },
    },
    computed: {
        queryPage: {
            get() {
                return this.$route.query.page;
            },
            set(val) {
                // 页面激活时再修改参数
                if (this.activatedFlag && val) {
                    this.routeSetPage(val);
                    this.$store.commit('setArticlePage', val);
                    return val;
                }
                return this.queryPage;
            },
        },
        currentPage: {
            get() {
                return parseInt(this.queryPage) || 1;
            },
            set(val) {
                this.queryPage = val;
            },
        },
        cid() {
            return parseInt(this.$route.params.cid);
        },
        categoryName() {
            return this.$store.getters.cName(this.cid);
        },
        bLength() {
            return this.breadcrumbItems.length;
        },
        breadcrumbItems() {
            return this.$store.getters.routerParents(this.cid);
        },
        parentCategory() {
            return this.$store.getters.parentNode(this.cid);
        },
        computeParentName() {
            return this.parentCategory.cid === 0
                ? '首页'
                : this.parentCategory.name;
        },
        computeParentLink() {
            return this.parentCategory.cid === 0
                ? '/'
                : '/category/' + this.parentCategory.cid;
        },
        siblingCategoryList() {
            return this.$store.getters.routerSiblings(this.cid);
        },
        computeMsgNum() {
            return this.totalMsgNum > 99 ? '99+' : this.totalMsgNum;
        },
        hasStaffList() {
            return this.staffList && this.staffList.length > 0;
        },
    },
    data() {
        return {
            rows: 0,
            perPage: 8,
            //文章列表
            postList: [],
            //师资列表
            staffList: [],
            //最新消息
            totalMsgNum: 32,
            currentMsg: [],
        };
    },
    created() {
        // 如果cid不存在则无需初始化
        if (this.cid) {
            //如果不存在页数参数则添加上
            if (!this.queryPage) {
                this.routeSetPage(1);
            }
            //加载文章列表
            this.changeCurrentPage();
            //加载最新消息
            getLatestPosts(6).then(({ postList, pageInfo }) => {
                this.currentMsg = postList;
                this.totalMsgNum = pageInfo.rows;
            });
        }
    },
    activated() {
        const _page = this.$store.getters.articlePage;
        if (_page && !this.queryPage) {
            this.currentPage = _page;
        }
        this.changeCurrentPage();
    },
    watch: {
        cid: function(newVal) {
            this.staffList = [];
            if (this.activatedFlag && newVal) {
                this.currentPage = 1;
                this.changeCurrentPage();
            }
        },
        currentPage: function() {
            if (this.activatedFlag) {
                this.changeCurrentPage();
            }
        },
    },
};
</script>

<style scoped lang="scss">
.list-group-item {
    background-color: inherit;
}
</style>
